<template>
    <div id="" class="left">

    <!--引用 mui 组件（折叠面板）-->

    <ul class="mui-table-view mui-table-view-chevron">
      <li class="mui-table-view-cell mui-collapse" v-for="item in uls">
        <a class="mui-navigate-right" href="#">{{item.ulname}}</a>
        <ul class="mui-table-view mui-table-view-chevron">
          <li class="mui-table-view-cell" v-if="item.to1!==''">
            <router-link class="mui-navigate-right" v-bind="{to:item.to1}">{{item.ulname}}</router-link>
          <li class="mui-table-view-cell" v-if="item.to2!==''">
            <router-link class="mui-navigate-right" v-bind="{to:item.to2}">{{item.erAname}}</router-link>
          </li>
          <li class="mui-table-view-cell" v-if="item.to3!==''">
            <router-link class="mui-navigate-right" v-bind="{to:item.to3}">{{item.sanname}}</router-link>
          </li>
          <li class="mui-table-view-cell" v-if="item.to4!==''">
            <router-link class="mui-navigate-right" v-bind="{to:item.to4}">{{item.siname}}</router-link>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    name: "left",
    data() {
      return {
        uls: [
          {
            "ulname": "首页", "to1": "/homepage",
            "to2": "", "erAname": "",
            "to3": "", "sanname": "",
            "to4": "", "siname": ""
          },
          {
            "ulname": "用户管理", "to1": "",
            "to2": "/use_control/userinfo", "erAname": "用户信息",
            "to3": "/use_control/vehicle_information", "sanname": "车辆信息",
            "to4": "/use_control/add_vehicle", "siname": "添加车辆"
          },
          {
            "ulname": "车辆管理", "to1": "",
            "to2": "/vehicle_management/vehicle_type", "erAname": "车辆类型",
            "to3": "/vehicle_management/number_vehicles", "sanname": "删除车辆",
            "to4": "", "siname": ""
          },
          {
            "ulname": "费用管理", "to1": "",
            "to2": "/expense_management/cost_details", "erAname": "费用详情",
            "to3": "", "sanname": "",
            "to4": "", "siname": ""
          },
          {
            "ulname": "反馈", "to1": "",
            "to2": "/feedback", "erAname": "问题反馈",
            "to3": "", "sanname": "",
            "to4": "", "siname": ""
          }
        ]
      }
    },
    created() {
    },
    methods: {}
  }
</script>

<style scoped>

  .left {
    background-color: #00bfff21;
    padding: 30px 6px;
    box-shadow: #bebebe 0 4px 5px;
    height: 100%;
  }

  .mui-table-view {
    width: 170px;
    background-color: transparent;
    border-bottom: none
  }

  .mui-table-view .mui-table-view-cell {
    padding-left: 20px;
    font-size: 14px;
  }

  .mui-table-view-cell > a:not(.mui-btn) {
    text-align: left;
    padding: 6px 15px
  }

  .mui-table-view:before,
  .mui-table-view:after,
  .mui-table-view-cell.mui-active,
  .mui-table-view-cell:after,
  .mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after {
    background-color: transparent
  }

</style>
